<template>
  <div class="playStrategy-drafts-wrapper">
    <v-header ref="header" :title="'我的游记攻略 ' + totalCount"></v-header>
    <div ref="wrapper">
      <scroll ref="scroll"
        v-if="draftList.length > 0"
        :data="draftList"
        :pullDownRefresh="true"
        :pullUpLoad="true"
        @pullingDown="onPullingDown"
        @pullingUp="onPullingUp">
        <div class="draft-list">
          <v-touch v-for="item in draftList" :key="item.id" class="item" @tap="clickItem(item)" @press="press(item)" :press-options="{time: 800}">
            <div class="firstImg" v-lazy:backgroundImage="item.firstImg"/>
            <p class="title">{{item.title}}</p>
            <p class="time">最近更新时间 {{item.updateAt || item.creatAt}}</p>
          </v-touch>
        </div>
      </scroll>
      <not-data v-else tip="没有草稿游记攻略~"></not-data>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import NotData from '@/components/not-data/not-data'

import axios from '@/api/axiosApi'
import { localUser } from '@/assets/js/local'

export default {
  data () {
    return {
      totalCount: 4,
      pageNum: 1,
      draftList: []
    }
  },
  components: {
    VHeader, Scroll, NotData
  },
  created () {
    this._getDraftList()
    this._getDraftCount()
  },
  mounted () {
    this.$refs.wrapper.style.height = window.innerHeight - this.$refs.header.$el.offsetHeight + 'px'
  },
  methods: {
    _getDraftList () {
      const _self = this
      axios.get(this, '/v1/playStrategy', {
        pageNum: this.pageNum,
        publishUserId: localUser.get('id'),
        curUserId: localUser.get('id'),
        publish: 0
      }, (data) => {
        if (data.length === 0) {
          if (_self.pageNum > 0) {
            if (_self.$refs.scroll) {
              _self.pageNum--
              _self.$refs.scroll.hiddenPullUpLoad()
            }
          } else {
            _self.$refs.scroll.hiddenPullDown()
          }
          return
        }
        if (_self.pageNum <= 1) {
          _self.draftList = data
        } else {
          _self.draftList = _self.draftList.concat(data)
        }
      })
    },
    _getDraftCount () {
      const _self = this
      axios.get(this, '/v1/playStrategyCount', {
        publishUserId: localUser.get('id'),
        publish: 0,
        curUserId: localUser.get('id')
      }, (data) => {
        _self.totalCount = data
      })
    },
    clickItem (item) {
      this.$router.push({
        path: `/address/travelsEdit/${item.articleType}`,
        query: {
          id: item.id
        }
      })
    },
    press (playStrategy) {
      const _self = this
      this.$vux.confirm.show({
        title: '确定删除这条游记/攻略吗？',
        onCancel () {
        },
        onConfirm () {
          axios.delete(_self, '/v1/playStrategy/' + playStrategy.id, null, () => {
            const index = _self.draftList.findIndex(o => o.id === playStrategy.id)
            _self.draftList.splice(index, 1)
          })
        }
      })
    },
    onPullingDown() {
      this.pageNum = 1
      this._getDraftList()
    },
    onPullingUp() {
      this.pageNum++
      this._getDraftList()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl';
.playStrategy-drafts-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  background-color: #ffffff;
  z-index: 101;

  .draft-list {
    padding: 0 18px;
    .item {
      padding: 18px 0;
      border-bottom: 1px solid $color-border;
      line-height: 1.2;
      .firstImg {
        width: 100%;
        position: relative;
        height: 180px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .title {
        margin-top: 12px;
        font-size: @font-size-large;
        font-weight: bold;
      }
      .time {
        margin-top: 6px;
        font-size: @font-size-desc;
        color: #444;

      }
    }
  }
}
</style>
